.SetUpCommonModal {
	.ImageSelect {
		width: 100%;
		height: 600px;
		overflow-y: scroll;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;

		& > div {
			width: 20%;
			aspect-ratio: 1/1;
			padding: 16px;
			cursor: pointer;

			& > img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				display: block;
				background: rgba(0, 0, 0, 0.15);
			}
		}
	}

	.MenuSetUpModal {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-bottom: 50px;
		position: relative;

		& > .preview {
			width: 375px;
			margin-right: 16px;
			height: 745px;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			& > .GridLayout {
				width: 100%;
				flex: 1;
				overflow: scroll;

				& > div {
					position: relative;
					overflow: hidden;

					&:hover {
						& > .GridLayoutDelete {
							left: 0;
						}
					}

					& > .GridLayoutDelete {
						position: absolute;
						left: 100%;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						background: rgba(0, 0, 0, 0.35);
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.35s;

						& > div {
							position: relative;
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100px;
							padding: 8px 16px;
							color: #fff;
							transition: 0.5s;
							letter-spacing: 4px;
							overflow: hidden;

							&:hover {
								background: var(--color);
								color: hsl(0, 0%, var(--hsl));
								box-shadow: 0 0 5px var(--color), 0 0 25px var(--color),
									0 0 50px var(--color), 0 0 200px var(--color);
								-webkit-box-reflect: below 1px
									linear-gradient(transparent, #0005);
							}

							& > span {
								position: absolute;
								display: block;

								&:nth-child(1) {
									top: 0;
									left: 0;
									width: 100%;
									height: 2px;
									background: linear-gradient(90deg, transparent, var(--color));
									animation: animate1 1s linear infinite;
								}

								&:nth-child(2) {
									top: -100%;
									right: 0;
									width: 2px;
									height: 100%;
									background: linear-gradient(
										180deg,
										transparent,
										var(--color)
									);
									animation: animate2 1s linear infinite;
									animation-delay: 0.25s;
								}

								&:nth-child(3) {
									bottom: 0;
									right: 0;
									width: 100%;
									height: 2px;
									background: linear-gradient(
										270deg,
										transparent,
										var(--color)
									);
									animation: animate3 1s linear infinite;
									animation-delay: 0.5s;
								}

								&:nth-child(4) {
									bottom: -100%;
									left: 0;
									width: 2px;
									height: 100%;
									background: linear-gradient(
										360deg,
										transparent,
										var(--color)
									);
									animation: animate4 1s linear infinite;
									animation-delay: 0.75s;
								}
							}

							@keyframes animate1 {
								0% {
									left: -100%;
								}

								50%,
								100% {
									left: 100%;
								}
							}

							@keyframes animate2 {
								0% {
									top: -100%;
								}

								50%,
								100% {
									top: 100%;
								}
							}

							@keyframes animate3 {
								0% {
									right: -100%;
								}

								50%,
								100% {
									right: 100%;
								}
							}

							@keyframes animate4 {
								0% {
									bottom: -100%;
								}

								50%,
								100% {
									bottom: 100%;
								}
							}
						}
					}
				}
			}
		}

		& > .SetUp {
			flex: 1;

			.InputLabel {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 8px;

				& > div:first-child {
					width: 100px;
					text-align: right;
					margin-right: 8px;
					font-size: 12px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #444444;
					line-height: 17px;
				}

				& > div:last-child,
				& > input:last-child {
					flex: 1;
				}
			}

			.Optional {
				width: 100%;
				height: 300px;
				border: 1px solid;
				overflow-y: scroll;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
		}

		& > .Submit {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				height: 100%;
				width: 200px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: hsl(0, 0%, var(--hsl));
				font-size: 20px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				cursor: pointer;
				border-radius: 50px;
				user-select: none;
			}
		}

		.MenuItem {
			width: 150px;
			height: 160px;
			margin: 8px;
			position: relative;
			z-index: 1;

			& > img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			& > div {
				& > div:first-child {
					height: 21px;
					font-size: 16px;
					font-family: MicrosoftYaHeiSemibold;
					color: #444444;
					line-height: 21px;
					margin-top: 18px;
					margin-left: 18px;
				}

				& > div:last-child {
					height: 16px;
					font-size: 12px;
					font-family: MicrosoftYaHeiSemibold;
					color: #888888;
					line-height: 16px;
					text-transform: uppercase;
					margin-left: 18px;
				}
			}
		}
	}

	.MenuItemTabsOptions {
		display: flex;
		align-items: center;
		justify-content: baseline;
		flex-direction: column;
		width: 100%;

		& > div {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;

			& > div:first-child {
				width: 120px;
				text-align: right;
				margin-right: 8px;
			}

			& > *:nth-child(2) {
				flex: 1;
				width: 100%;
			}

			&.Submit {
				& > div {
					width: 200px;
					height: 44px;
					border-radius: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					color: #fff;
					font-size: 24px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					cursor: pointer;
					user-select: none;
				}
			}
		}
	}

	.MenuItemTabsDispose {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		height: 60vh;

		& > div:first-child {
			width: 375px;
			height: 100%;
			margin-right: 16px;
			background: rgba(0, 0, 0, 0.15);
			padding: 15px;
			border-radius: 4px;
		}

		& > div:last-child {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			& > div {
				width: 100%;

				&:first-child {
					flex: 1;
					overflow-y: scroll;

					& > .DisposeOptions {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom: 8px;

						& > div:first-child {
							width: 100px;
							text-align: right;
							margin-right: 8px;
							font-size: 12px;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #444444;
							line-height: 17px;
						}

						& > div:last-child,
						& > input:last-child {
							flex: 1;
						}
					}
				}

				&:last-child {
					height: 44px;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						width: 100px;
						height: 40px;
						border-radius: 40px;
						font-size: 16px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						user-select: none;
					}
				}
			}
		}
	}
}
